<template>
    <div class="observerLibrary-increase">
        <!-- 新增弹窗 -->
        <a-modal
         :visible="visibleShow" 
         width="100%"
         wrapClassName="full-modal"
         :title="'违法违规（企业名称：'+formState.fqymc+'）'" 
         @ok="visibleShow = false" 
         @cancel="visibleShow = false">
            <div class="" v-if="visibleShow">
                <commpVxeTable
                :config="dataTableConfig" 
                :columns="columnsVxe" 
                :formItem="formItem"
                ref="wfwjIncreaseRef"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
                @checkboxChange="checkboxChange"
                >
                    <template v-slot:externalOperations="{data}"  >
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="newlyAddedClick()">新增</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <a-button class="red-btn" type="primary" @click="batchDelete()">批量删除</a-button>
                            </template>
                        </vxe-form-item>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="editClick(row)">编辑</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button class="red-btn" type="primary" @click="deleteClick(row)">删除</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
            <addWfwj ref="addWfwjRef" @successClick="successClick"/>
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import { deleteWfwjjl, } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import addWfwj from './addWfwj.vue'
export default {
    components:{
        commpVxeTable,
        addWfwj,
    },
    props:{
    },
    data(){
        return{
            formState:{},
            visibleShow:false,
            dataTableConfig:{
                api: assessCheckApi.queryQyWfwjjlPageList,
                rowId: 'id',
                height:550,
                paramet:{}
            },
            formItem:[],
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '违法内容', //列头显示文字
                field: 'fwfnr',
            },{
                title: '备注', //列头显示文字
                field: 'fbz',
            },{
                title: '填写日期',
                field: 'ftxrq',
            },{
                title: '操作',
                field: 'id',
                slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
                },
                width:335
                // visible:!this.parameter.isReadOnly
            }],
            selectIdArr:[]
        }
    },
    watch:{
    },
    mounted(){

    },
    updated(){
    },
    methods:{
        getData(val){
            this.formState = val
            this.dataTableConfig.paramet = {
                fqyid:val.id
            }
        },
        searchEvent(){

        },
        resetEvent(){

        }, 
        successClick(val){
            this.$emit('handleOk')
            this.$refs.wfwjIncreaseRef.searchEvent()
            this.$refs.addWfwjRef.getData(this.formState,val)
        },
        checkboxChange(val){
            this.selectIdArr = []
            val.forEach(item => {
                this.selectIdArr.push(item.id)
            });
        },
        newlyAddedClick(){
            this.$refs.addWfwjRef.getData(this.formState,{})
            this.$refs.addWfwjRef.visible = true
        },
        batchDelete(){
            var that = this
            if(this.selectIdArr.length){
                this.$confirm({
                    title:'您确认要删除吗？',
                    onOk() {
                        deleteWfwjjl({ids:that.selectIdArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.$message.success(res.message)
                                that.$refs.wfwjIncreaseRef.searchEvent()
                                that.$emit('handleOk')
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请选择删除项')
            }
        },
        editClick(val){
            this.$refs.addWfwjRef.getData(this.formState,val)
            this.$refs.addWfwjRef.visible = true
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                onOk() {
                    deleteWfwjjl({ids:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$refs.wfwjIncreaseRef.searchEvent()
                            that.$message.success(res.message)
                            that.$emit('handleOk')
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        }
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .enterpriseInformation-modal-from{
    // .ant-form-item-label{
    //     width: 175px;
    // }
    // .ant-form-item-control-wrapper{
    //     width: 260px;
    // }
    // .ant-calendar-picker{
    //     width: 260px;
    // }
 }
 .full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    background: #fff;
  }
  .ant-modal-body {
    flex: 1;
    background: #fff;
    overflow-y: auto;
  }
}
</style>